<!--
    Document    : index
    Created on  : 10-04-2014, 16:23:16
    Author      : Mr. Truong Khuong
    Phone       : 0985 747 240
    Email       : Khuongxuantruong@gmail.com
    Skype       : Khuongxuantruong
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../moodycrab/moodycrab.css" rel="stylesheet">
        <script src="../js/jquery-1.9.1.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
            <div class="container">
                <div class="navbar-header visible-xs">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar line-1"></span>
                        <span class="icon-bar line-2"></span>
                        <span class="icon-bar line-3"></span>
                    </button>
                    <a href="/home" class="navbar-brand">
                        <img src="images/logo.jpg"/>
                    </a>
                </div>
                <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation" >
                    <ul class="nav navbar-nav">

                        <li class=""><a href='index.html'>HOME</a></li>
                        <li class="active"><a href='work.html'>WORK</a></li>
                    </ul>

                    <a href="/home">
                        <img class="logo hidden-xs" src="images/logo.jpg"/>
                    </a>
                    <ul class="nav navbar-nav navbar-right">
                        <li class=""><a href='about.html'>ABOUT</a></li>
                        <li class=""><a href='contact.html'>CONTACT</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div  class="container" style="position: relative;z-index: 1">
            <div class="slogan">
                WORK DETAIL
            </div>
            <div style="padding: 20px 0 100px 0;">
                <div class="col-md-8 ">
                    <div class="project-image">
						<div style="position:relative;padding-bottom:56%">
							<iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="//www.youtube.com/embed/Jf5MFhSWEec" frameborder="0" allowfullscreen></iframe>
						</div>
						<div class="note-image"><span>VIDEO 1</span> : Lorem ipsum domoni naju uht</div>
						<div style="position:relative;padding-bottom:56%">
							<script src="http://coolestguidesontheplanet.com/videodrome/mediaelementjs/build/mediaelement-and-player.min.js"></script>
							<link  href="http://demo.onedesigns.com/mediaelement/skin/mediaelementplayer.css" rel="Stylesheet" />
							<script src="http://coolestguidesontheplanet.com/videodrome/mediaelementjs/build/custom.js"></script>
							
							<div style="position:absolute;top:0;left:0;width:100%;height:100%">
							<video  id="player1" preload="none " style="width:100%;height:100%;" controls="controls" width="640" height="320">
								<source type="video/youtube" src="http://www.youtube.com/watch?v=z3WYQLQ1IZ8" />
							</video>
							<script>
							jQuery(document).ready(function($) {

								$('video').mediaelementplayer({
									success: function(media, node, player) {
										$('#' + node.id + '-mode').html('mode: ' + media.pluginType);
									}
								});

							});
							</script>
							</div>
						</div>
						<div class="note-image"><span>VIDEO 2</span> : Lorem ipsum domoni naju uht</div>
                        <img src="images/work-image.jpg"/>
                        <div class="note-image"><span>PICT 1</span> : Lorem ipsum domoni naju uht</div>
                    </div>
                </div>
                <div class="col-md-4 ">
                    <div class="project-content">
                        <div class="project-title">WHEEL CHAIR PARAQUAD</div>
                    We targeted one of Adelaide’s busiest restaurant streets; a popular place for pre-Christmas eating and drinking. We attached printed wheelchair discs with the message ‘Don’t drink and drive this festive season’ to hundreds of bar, café and restaurant chairs, on the busy strip. To drinkers, passing pedestrians and motorists, it was a graphic representation of how quickly your life can change if you drink and drive.
<br/>
It had an incredible effect. Passersby stopped in their tracks to take in the scene. People sitting in the chairs discussed what it would be like, as the topic was hard to avoid. And mainstream media were quick to cover the story on TV, radio and press. All on a shoe-string budget. 
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            
            <div class="">
                <div style="border-bottom: 1px solid #ccc;border-top:1px solid #ccc;padding-top:20px;padding-bottom:20px">
                    
                    <div class="col-md-4 col-xs-6 nav-item">
                        <div class="">
                            <a href="project-planner.html">
                            <div class="nailthumb">
                                <div class="nailthumb-figure square">
                                    <div class="nailthumb-container">
                                        <img class="nailthumb-image" src="images/ico1.png" >
                                    </div>
                                </div>
                            </div>
                            <h3>PROJECT PLANNER</h3>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-6 nav-item">
                        <div class="">
                            <a href="about.html">
                            <div class="nailthumb">
                                <div class="nailthumb-figure square">
                                    <div class="nailthumb-container">
                                        <img class="nailthumb-image" src="images/ico2.png" >
                                    </div>
                                </div>
                            </div>
                            <h3>CONNECT</h3>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-6 nav-item">
                        <div class="">
                            <a href="about.html">
                            <div class="nailthumb">
                                <div class="nailthumb-figure square">
                                    <div class="nailthumb-container">
                                        <img class="nailthumb-image" src="images/ico3.png" >
                                    </div>
                                </div>
                            </div>
                            <h3>NEWSLETTER</h3>
                            </a>
                        </div>
                    </div>
                    
                    <div class="clear"></div>
                </div>
            </div>

            <div class="foot">
                <div style="border-bottom: 1px solid #ccc;padding-top:40px;padding-bottom:40px">
                    <div class="col-md-4">
                        <h3>Contact Detail</h3>
                        
                        <p>
                            <span>+ P :</span>
                            0422 925 979
                        </p>
                        <p>
                            <span>+ E :</span>
                            admin@moodycrab.com
                        </p>
                    </div>
                    <div class="col-md-8">
                        <h3>Send Us A Message</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-contact">
                                    <div class="">
                                        <input type="text" class="form-control" placeholder="Enter your name here">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <img src="images/phone-ico.jpg"/>
                                        </span>
                                        <input type="text" class="form-control" placeholder="Phone">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <img src="images/mail-ico.jpg"/>
                                        </span>
                                        <input type="text" class="form-control" placeholder="Email">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-contact">
                                    <div class="">
                                        <textarea class="form-control" rows="3"></textarea>
                                    </div>
                                    <div class="" style="text-align: right;">
                                        <button type="button" class="btn btn-default">RESET</button>
                                        <button type="button" class="btn btn-danger">SUBMIT</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="copyright">
                    Coppyright &copy; MoodyCrab 2014
                </div>
            </div>	
        </div>